<template>
	<div flex class="layout">
		<base-layout bgColor="#FAFAFA" style="width: 300px" :operateButtonSwitch="false" :showTitle="false"
			v-loading="loading">
			<div slot="main" class="box">
				<div class="searchFor">
					<el-input v-model="searchFor" placeholder="任务名称\业务员\项目经理" style="width: 250px" class="input"
						clearable></el-input>
					<i class="el-icon-search" size="22" @click="search"></i>
				</div>
				<div class="whole">
					<div class="module" v-for="(item, index) in planList" :key="index"
						:style="{ 'background-image': getBackgroundImage(item.proStateName) }"
						@click="getDetails(item.billid)">
						<div class="common first">
							<span class="left">{{ item.projectName }}</span>
							<span class="right">10</span>
						</div>
						<div class="common  second">
							<span class="left">实际人天：{{ item.totalDays }}</span>
							<span class="offside">{{ item.proStateName }}</span>
						</div>
						<div class="common third">
							<span class="left">业务员：{{ item.salesName }}</span>
							<span class="right">项目经理：{{ item.pmPersonName }}</span>
						</div>
						<el-progress :percentage="progress(item.proStateName)" :stroke-width="10"></el-progress>
					</div>
				</div>
			</div>
		</base-layout>
		<!-- <div "> -->
		<base-layout ref="layout" :buttonList="nowBtns" :showTitle="false" :defaultButtonSwitch="false" class="layout-right"
			@onFuncBtn="getFuncBtn">
			<div slot="main" slot-scope="{ tableHeight }" class="table">

				<el-button v-if="tableData.length == 0 && check == false" type="primary" plain @click="stageAdd"
					class="button-plus" icon="el-icon-plus" circle></el-button>

				<base-table v-if="!check" ref="planEditTable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading"
					:tableHeight="tableHeight" style="overflow: auto;" :tableData="tableData" :tableColumn="tableColumn"
					:funData="[]" :indexOperate="true" @newRow="add">
					<!--  序号  -->
					<template v-slot:index="{ row }" align="center">
						<span>{{ row.$index + 1 }}</span>
					</template>
					<!--  阶段名称  -->
					<template v-slot:phaseName="{ row }">
						<el-select v-model="row.phaseName" placeholder="请选择" width="100%">
							<el-option v-for="item in phaseOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
					<!--  执行内容  -->
					<template v-slot:phaseContent="{ row }">
						<el-input v-model="row.phaseContent" clearable type="text"></el-input>
					</template>
					<!--  功能模块  -->
					<template v-slot:projectModule="{ row }">
						<el-input v-model="row.projectModule" clearable type="text"></el-input>
					</template>
					<!--  计划投入人天  -->
					<template v-slot:projectModuleContent="{ row }">
						<el-input v-model="row.projectModuleContent" clearable type="text"></el-input>
					</template>
					<!--  计划开始日期  -->
					<template v-slot:planStartDate="{ row }" style="text-align: right;">
						<el-date-picker v-model="row.planStartDate" align="right" type="date" placeholder="选择日期"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</template>
					<!--  计划完成日期  -->
					<template v-slot:planEendDate="{ row }" style="text-align: right;">
						<el-date-picker v-model="row.planEendDate" align="right" type="date" placeholder="选择日期"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</template>
					<!--  实际开始日期  -->
					<template v-slot:realityStartDate="{ row }" style="text-align: right;">
						<el-date-picker v-model="row.realityStartDate" align="right" type="date" placeholder="选择日期"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</template>
					<!--  实际完成日期  -->
					<template v-slot:realityEndDate="{ row }" style="text-align: right;">
						<el-date-picker v-model="row.realityEndDate" align="right" type="date" placeholder="选择日期"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</template>
					<!--  预警天数  -->
					<template v-slot:warningDays="{ row }">
						<el-input v-model="row.warningDays" clearable
							@input="(v) => (row.warininDays = v.replace(/[^\d]/g, ''))">
						</el-input>
					</template>
					<!-- 状态 -->
					<template v-slot:state="{ row }">
						<el-select v-model="row.state" placeholder="请选择" width="100%">
							<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
					<!--  完成反馈内容  -->
					<template v-slot:realityContent="{ row }">
						<el-input v-model="row.realityContent" clearable type="text"></el-input>
					</template>
					<!--  责任工程师  -->
					<template v-slot:affiliatedPersons="{ row }">
						<div flex @click="elDialogClick(row)">
							<p class="single" :style="{ color: row.affiliatedPersons ? '#000' : '#c0c4cc' }"
								style="width: 100%;cursor: pointer;font-size: 14px;">
								{{ row.affiliatedPersons ? row.affiliatedPersons : "请点击选择" }}
							</p>
							<i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
						</div>
					</template>
					<!--备注  -->
					<template v-slot:remark="{ row }">
						<el-input v-model="row.remark" clearable type="text"></el-input>
					</template>
					<template v-slot:operate="{ row }" fixed="right">
						<el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
							<i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px"
								@click="del(row)"></i>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="复制当前行" placement="top">
							<i class="el-icon-document-copy" style="color: #1f63ff; font-size: 16px"
								@click="duplicate(row)"></i>
						</el-tooltip>
					</template>
				</base-table>
				<base-table v-if="check" ref="planCheckTable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading"
					:tableHeight="tableHeight" style="overflow: auto;" :tableData="planCheckTableData" align="center"
					:tableColumn="planCheckColumn">
					<template v-slot:planStartDate="{ row }">
						<span>{{ formatTime(row.planStartDate) }}</span>
					</template>
					<template v-slot:planEendDate="{ row }">
						<span>{{ formatTime(row.planEendDate) }}</span>
					</template>
					<template v-slot:realityStartDate="{ row }">
						<span>{{ formatTime(row.realityStartDate) }}</span>
					</template>
					<template v-slot:realityEndDate="{ row }">
						<span>{{ formatTime(row.realityEndDate) }}</span>
					</template>
				</base-table>
			</div>
		</base-layout>
		<!-- </div> -->
		<base-radio-people ref="baseRadioPeople" @personConfirmClick="personConfirmClick"></base-radio-people>
		<!-- <base-quantity-person ref="baseQuantityPerson" @personConfirmClick="personConfirmClick"></base-quantity-person> -->
	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import configData from "./configData";
import baseQuantityPerson from '@/components/base/baseQuantityPerson'
import baseRadioPeople from "@/components/base/baseRadioPeople/index.vue";

import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { projectList, projectDetailData, projectSaveData, projectDelData, projectProMemberDelData, projectProPhaseDelData } from "@/api/apis/projectManagement";
export default {
	components: {
		baseLayout,
		baseTable, baseQuantityPerson, baseRadioPeople,
		baseDialog,
	},
	data() {
		return {
			textarea: '',
			pageModel: {
				page: 1,
				limit: 20,
				Sequence: "",
				SequenceName: "",
			},
			nowBtns: [
				{
					type: "primary",
					menuName: "开始编辑",

					// icon: "el-icon-search",
				}, {
					type: "primary",
					menuName: "更新计划",

					// icon: "el-icon-search",
				}],
			selected: [], //选中数据,
			stateOptions: [],//数据字典下拉
			phaseOptions: [],//数据字典下拉
			optionIndex: "",
			tableHeight: 'calc(100vh - 200px)',
			visible: false,
			tableColumn: configData.tableColumnJson, //表头
			planCheckColumn: configData.planCheckColumn, //表头
			tableData: [], //表体
			planCheckTableData: [],//查看数据
			tabLoading: false, //
			loading: false,

			searchFor: '',
			planList: [],
			billid: '',
			check: true,
		};
	},
	created() {
	},
	mounted() {
		this.init();

	},
	methods: {
		// 时间格式化
		formatTime(row) {
			return row && row.substring(0, 10);
		},
		init() {
			this.listData()
			this.getProjectPhaseList()
			this.getProjectStateList()
		},

		// 查询
		search() {
			this.listData()
		},
		getBackgroundImage(el) {
			if (el == '已完成') {
				return 'linear-gradient(153deg, #9AE91C 0%, #61CE0C 100%)'; // 
			} else if (el == '进行中') {
				return 'linear-gradient(180deg, #5EC0FF 0%, #308CFF 100%)'; // 
			} else if (el == '已关闭') {
				return 'linear-gradient(154deg, #FF7B7B 0%, #EA1E1E 100%)'; // 
			} else if (el == '未开始' || el == '') {
				return 'linear-gradient(154deg, #EAE7E7 0%, #EAE7E7 100%)'; // 默认背景色
			}
		},
		progress(el) {
			if (el == '已完成') {
				return 100; // 
			} else if (el == '进行中') {
				return 50; // 
			} else if (el == '已关闭') {
				return 0; // 
			} else if (el == '未开始' || el == '') {
				return 0; // 默认背景色
			}
		},
		getFuncBtn(btnEven) {
			if (btnEven.menuName == "开始编辑" && this.billid != '') {
				this.check = !this.check
				this.getDetails(this.billid)
			} else if (btnEven.menuName == "更新计划" && this.billid != '') {
				this.save()
			} else {
				this.$vmNews("请选择左侧项目列表数据编辑或更新", "warning");
			}
		},
		//保存
		async save() {
			let params = {
				dataMain: {
					billid: this.billid
				},
				business_ProMember: [],
				business_ProPhase: [],
				attIDS: "",
			}
			this.tableData.forEach((el) => {
				params.business_ProPhase.push({
					...el,
					rowIndex: el.index,
				});
			});
			let res = await projectSaveData(params);
			if (res.code == 1) {
				this.$vmNews("保存成功", "success");
				this.billID = res.data[0];
				this.check = true
				this.getDetails(this.billid)
			}
		},
		//左侧列表数据
		async listData() {
			this.loading = true
			this.billid = ''
			const res = await projectList({ ...this.pageModel, codeOrName: this.searchFor });
			if (res.code == 1) {
				this.planList = res.data[1];
				this.loading = false
			}
		},
		// 当前详情数据
		async getDetails(id) {
			this.check = true
			this.tabLoading = true;
			this.billid = id;
			let params = {
				id: id,
				op: "",
			};
			let res = await projectDetailData(params);
			if (res.code == 1) {
				// console.log(this.check, "check");
				// 查看
				if (this.check) {
					this.planCheckTableData = res.data[2];
				} else {
					this.tableData = res.data[2];
				}
				this.tabLoading = false;

			}

		},
		//弹窗获取所需人员
		personConfirmClick(arr) {
			console.log(arr);
			this.$set(this.tableData[this.optionIndex], "affiliatedPersons", arr.p_PersonName);
			// this.$set(this.tableData[this.optionIndex], "affiliatedPersons", arr.p_PersonID);
		},
		// 项目组成员点击事件
		async elDialogClick(row) {
			this.$refs.baseRadioPeople.openDialog();
			// this.$refs.baseQuantityPerson.openDialog()
			this.optionIndex = row.index;
		},
		// 获取项目阶段 数据字典
		async getProjectPhaseList() {
			let params = {
				KindId: 24,
				page: 1,
				limit: 999,
				sequence: "",
				sequenceName: "",
			};
			let res = await dataDictionaryGetBillList(params);
			if (res.code == 1) {
				let arrList = [];
				if (res.data[0] > 0) {
					res.data[1].forEach((el) => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID,
						};
						arrList.push(arr);
					});
				}
				this.phaseOptions = arrList;
			}
		},
		// 获取项目状态 数据字典
		async getProjectStateList() {
			let params = {
				KindId: 51,
				page: 1,
				limit: 999,
				sequence: "",
				sequenceName: "",
			};
			let res = await dataDictionaryGetBillList(params);
			if (res.code == 1) {
				let arrList = [];
				if (res.data[0] > 0) {
					res.data[1].forEach((el) => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID,
						};
						arrList.push(arr);
					});
				}
				this.stateOptions = arrList;
			}
			// console.log(this.stateOptions);
		},

		async del(row) {
			this.$confirm('确认删除该明细吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				projectProPhaseDelData({ id: row.detail_ID }).then(res => {
					if (res.success == "true") {
						this.$emit("renovate");
						this.$message({
							message: "删除成功",
							type: "success",
						});
						this.tableData.splice(row.index, 1);
						this.$emit('renew')
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		// 复制功能
		doubleClick(row, column, cell, event) {
			var text = event.target.innerText;
			var input = document.getElementById("input");
			input.value = text; // 修改文本框的内容
			input.select(); // 选中文本
			document.execCommand("copy");
			this.$notify.success({
				title: `${text}`,
				message: `已复制到剪贴板`,
				// showClose: false
			});
		},
		//添加
		add() {
			let arr = {}
			this.tableData.push(arr)
		},
		stageAdd() {
			this.add();
		},
	},
};
</script>
<style scoped lang="scss">
.layout {
	width: 100%;
	height: 100%;
	background: #fff;

	.box {
		padding: 10px;
		height: calc(100% - 32px);

		// overflow: hidden;
		.searchFor {
			display: flex;
			position: fixed;

			.input {
				margin-right: 10px;
			}

			::v-deep .el-icon-search {
				font-size: 20px;
				cursor: pointer;
				padding-top: 9px;
			}
		}

		.whole {
			margin-top: 42px;
			height: calc(100% - 10px);
			overflow-y: auto;
			border: 1px solid #d7d7d7;
			border-radius: 8px;
			background: #fff;

			.module {
				// background-image: linear-gradient(to top, #5597f3, #a7cafa);
				width: 100%;
				height: 150px;
				padding: 20px 10px;
				cursor: pointer;
				border-radius: 8px;
				margin-bottom: 10px;

				::v-deep .el-progress__text {
					margin-left: 10px;
					font-size: 14px;
				}

				::v-deep .el-progress-bar__outer {
					background-color: #ffffff;
				}

				.common {
					margin-bottom: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.first {
					.left {
						width: 80%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 600;
						font-size: 17px;
						color: #666;
						display: inline-block;
					}

					.right {
						width: 20px;
						height: 20px;
						line-height: 20px;
						font-size: 13px;
						color: #fff;
						background: #ff3229;
						border-radius: 50%;
						text-align: center;
					}
				}

				.second {
					font-size: 14px;

					.offside {
						font-size: 13px;
						width: 60px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						border: 1px solid #f6ab48;
						border-radius: 5px;
						background: #fff;

					}
				}

				.third {
					font-size: 14px;

				}
			}


		}
	}

	.table {
		height: 100%;
		position: relative;

		.button-plus {
			position: absolute;
			top: 54px;
			left: 10px;
			z-index: 999;
			padding: 6px;
		}
	}

	.layout-right {
		flex: 1;
		height: 100%;
		width: calc(100% - 300px);
		padding: 0 10px 10px;

		::v-deep .el-table--scrollable-x .el-table__body-wrapper {
			// height: 77.5vh;

		}
	}
}
</style>
